<template>
  <div class="main">
    <div>
      <homePage></homePage>
    </div>
    <div class="search-wrap">
      <div class="logo">
        <img
          class="logo_img"
          src="../assets/home/logo.png"
          @click="to_first_page"
        />
      </div>
      <div
        class="search-scope-wrap"
        ref="scope"
        @click="isScopeVisible = !isScopeVisible"
      >
        <div class="search-scope">
          {{ searchScope }}
          <img src="../assets/dropdown.svg" alt="" />
        </div>
        <div v-if="isScopeVisible" class="scope-list">
          <ul>
            <li
              v-for="item in searchScopeList"
              :key="item"
              @click="changeScope(item)"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <div class="search-input-box">
        <input
          type="text"
          v-model="searchInfo"
          placeholder="中文文献、外文文献"
        />
        <img
          @click="search()"
          class="search-icon"
          src="@/assets/search.svg"
          alt="search_icon"
        />
      </div>
    </div>
    <div class="body">
      <div class="filter-list-wrap">
        <div class="filter-list">
          <div class="filter-box">
            <div class="filter-box-title">
              {{ filter.title }}
              <img
                v-if="filter.visible"
                @click="filter.visible = false"
                src="../assets/dropup.svg"
                alt=""
              />
              <img
                v-else
                @click="filter.visible = true"
                src="../assets/dropdown.svg"
                alt=""
              />
            </div>
            <div v-if="filter.visible" class="filter-box-option-wrap">
              <div class="filter-box-option">
                <label
                  :for="filter.option"
                  @click="chooseFilter($event, filter.option)"
                  v-for="option in filter.option"
                  :key="option"
                >
                  <input
                    type="checkbox"
                    :value="option"
                    :id="option"
                    v-model="filter.selected"
                    class="checkboxList"
                  />
                  <span>{{ option }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="filter-list">
          <div class="filter-box">
            <div class="filter-box-title">
              {{ year.title }}
              <img
                v-if="year.visible"
                @click="year.visible = false"
                src="../assets/dropup.svg"
                alt=""
              />
              <img
                v-else
                @click="year.visible = true"
                src="../assets/dropdown.svg"
                alt=""
              />
            </div>
            <div v-if="year.visible" class="filter-box-option-wrap">
              <div class="filter-box-option">
                <label
                  :for="year.option"
                  @click="chooseYear($event, year.option)"
                  v-for="option in year.option"
                  :key="option"
                >
                  <input
                    type="checkbox"
                    :value="option"
                    :id="option"
                    v-model="year.selected"
                    class="checkboxList"
                  />
                  <span>{{ option }}</span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="search-result">
        <div class="search-detail-wrap1">
          <div class="search-detail">检索范围：{{ searchScope }}</div>
          <!-- <div class="search-detail">主题：{{ searchTheme }}</div> -->
          <!-- <div class="search-detail result-count">
            共找到 <span>{{ resultCount }}</span> 条结果
          </div> -->
        </div>
        <div class="search-detail-wrap2">
          <!-- <div class="search-detail">
            <label>
              <input type="checkbox" v-model="isAll" @click="selectAll()" />
            </label>
            全选
          </div>
          <div class="search-detail">
            已选：<span>{{ selectedCount }}</span>
          </div>
          <div
            class="search-detail"
            @click="clearSelect()"
            style="cursor: pointer"
          >
            清除
          </div>
          <div class="search-detail" style="cursor: pointer">批量下载</div> -->
          <div class="search-detail">排序：</div>
          <div class="sort-wrap">
            <div
              v-for="item in sort"
              :key="item.id"
              class="sort-option"
              @click="changeSort(item.id)"
              :style="{
                color: item.color,
                background: item.background,
                borderRight: item.borderRight,
              }"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="search-detail">显示：</div>
          <div
            class="search-detail"
            ref="select"
            @click="isShowVisible = !isShowVisible"
          >
            <div class="show-count">
              {{ searchSize }}条
              <img src="../assets/dropdown.svg" alt="" />
            </div>
            <div v-if="isShowVisible" class="show-list" id="show-box">
              <ul>
                <li
                  v-for="item in sizeOption"
                  :key="item"
                  @click="changeShow(item)"
                >
                  {{ item }}条
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="result" v-loading="loading">
          <el-empty v-if="noData" :image-size="200"></el-empty>
          <table v-else>
            <thead>
              <tr>
                <th></th>
                <th v-for="key in tableHead" :key="key.id">{{ key.name }}</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in resultDataShow"
                :key="item.showid"
                :style="{
                  backgroundColor: item.showid % 2 != 0 ? '#F4F4F4' : 'white',
                }"
              >
                <td style="width: 70px; text-align: center; padding: 0">
                  <!-- <label style="position: relative; top: -1px">
                    <input
                      type="checkbox"
                      v-model="item.isSelected"
                      class="checkboxList"
                      @click="checkIsAll(item.showid)"
                    />
                  </label> -->
                  {{ item.showid }}.
                </td>
                <td
                  v-if="searchScope == '标题'"
                  style="width: 380px; cursor: pointer"
                  v-html="changeColor(item.title)"
                  @click="to_paper_info(item.id)"
                ></td>

                <td
                  v-else
                  style="width: 380px; cursor: pointer"
                  @click="to_paper_info(item.id)"
                >
                  {{ item.title }}
                </td>
                <td
                  v-if="searchScope == '作者'"
                  v-html="changeColor(calcAuthor(item.authors))"
                ></td>
                <td v-else>{{ calcAuthor(item.authors) }}</td>
                <td v-if="item.venue" style="width: 180px">
                  {{ item.venue.raw }}
                </td>
                <td v-else style="width: 180px"></td>
                <td style="width: 100px; text-align: center">
                  {{ item.year }}
                </td>
                <!-- <td style="width: 100px; text-align: center">
                  {{ item.database }}
                </td> -->
                <td style="width: 80px; text-align: center">
                  {{ item.n_citation }}
                </td>
                <!-- <td style="width: 80px; text-align: center">
                  {{ item.download }}
                </td> -->
                <td style="width: 100px; text-align: center">
                  <!-- <img src="../assets/download.svg" alt="" /> -->
                  <img
                    v-if="!item.isBookmark"
                    @click="bookmark(item.showid, item.id)"
                    src="../assets/grey_star.svg"
                    alt=""
                  />
                  <img
                    v-else
                    @click="bookmark(item.showid, item.id)"
                    src="../assets/yellow_star.svg"
                    alt=""
                  />
                  <!-- <img src="../assets/quote.svg" alt="" /> -->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination">
          <span v-if="pageNow > 1" @click="prePage()">&lt;</span>
          <span v-else style="visibility: hidden">&lt;</span>
          <span v-if="pageListShow[2] - 2 > 1">...</span>
          <span
            v-for="page in pageListShow"
            :key="page"
            :style="{
              color: page === pageNow ? '#FFFFFF' : '#666666',
              background: page === pageNow ? '#4B5CB3' : '#FFFFFF',
              outlineColor: page === pageNow ? '#4B5CB3' : '#BABABA',
            }"
            @click="changePage(page)"
          >
            {{ page }}
          </span>
          <span v-if="totalPage - pageListShow[2] > 3">...</span>
          <span v-if="pageNow < totalPage" @click="nextPage()">&gt;</span>
          <span v-else style="visibility: hidden">&gt;</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import homePage from "../components/homePage.vue";
export default {
  name: "SearchResult",
  components: {
    // Header,
    homePage,
  },
  data() {
    return {
      isLogin: false,
      isScopeVisible: false,
      searchScope: "主题",
      searchScopeList: ["主题", "标题", "作者", "机构", "期刊号"], //, "来源"
      formData: {
        search: {
          text: "",
          // text: "biochemistry",
          by: "title",
          from: 0,
          size: 1000,
          filter: [],
          year_filter: [
            2018, 2019, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009,
            2008, 2007, 2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998,
          ],
          sort: "", //筛选条件 作者、机构、年份等
        },
      },
      searchInfo: "",
      searchFrom: 0,
      searchSize: 20,
      totalPage: 1,
      resultCount: 0,
      noData: true,
      loading: true,
      isAll: false,
      sortNow: 0,
      sort: [
        {
          id: 0,
          name: "综合",
          color: "white",
          background: "#4B5CB3",
          borderRight: "#dedede solid 1" + "px",
        },
        {
          id: 1,
          name: "最新发表",
          color: "#777777",
          background: "none",
          borderRight: "#dedede solid 1" + "px",
        },
        {
          id: 2,
          name: "被引量",
          color: "#777777",
          background: "none",
          borderRight: "#dedede solid 1" + "px",
        },
      ],
      isShowVisible: false,
      sizeOption: [10, 20, 30],
      filter: {
        title: "主题",
        visible: true,
        selected: [],
        option: [
          "Biochemistry",
          "Chemistry",
          "Physicochemical",
          "Artificial Intelligence",
          "Computer Science",
          "Software Engineering",
          "Mechanical Engineering",
          "Chemical Engineering",
          "Biology",
          "Physic",
          "Pure Biology",
        ],
      },
      year: {
        title: "年份",
        visible: true,
        selected: [],
        option: [
          2018, 2019, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009,
          2008, 2007, 2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998,
        ],
      },
      tableHead: [
        { id: 0, name: "标题" },
        { id: 1, name: "作者" },
        { id: 2, name: "来源" },
        { id: 3, name: "年份" },
        // { id: 4, name: "数据库" },
        { id: 5, name: "被引" },
        // { id: 6, name: "下载" },
        { id: 7, name: "收藏" },
      ],
      resultData: [
        {
          abstract: "",
          authors: "",
          doi: "",
          id: "",
          issn: "",
          issue: "",
          lang: "",
          n_citation: "",
          page_end: "",
          page_start: "",
          title: "",
          url: "",
          venue: "",
          volume: "",
          year: "",
          isBookmark: false,
          showid: "",
        },
        // {
        //   id: 1,
        //   isSelected: false,
        //   title: "计算机视觉辅助斜拉桥索力测试实验研究",
        //   author: "邵帅、吴桐、郭劲岑、高燕梅、周志祥",
        //   source:
        //     "2022世界交通运输大会(WTC2022)论文合集（桥梁工程与隧道工程篇）",
        //   time: "2022-08-29 17:06",
        //   database: "国际会议",
        //   referenced: 0,
        //   download: 5,
        //   isBookmark: false,
        //   background: "#F4F4F4",
        // },
      ],
      resultDataShow: [],
      // totalPage: 0,
      pageNow: 1,
      pageList: [],
      pageListShow: [],
    };
  },
  mounted() {
    if (sessionStorage.length == 0) this.isLogin = false;
    else this.isLogin = true;
    this.initPage();
    document.addEventListener("click", (e) => {
      if (!this.$refs.select.contains(e.target)) this.isShowVisible = false;
    });
    document.addEventListener("click", (e) => {
      if (!this.$refs.scope.contains(e.target)) this.isScopeVisible = false;
    });
  },
  methods: {
    to_first_page() {
      this.$router.push("/");
    },
    to_paper_info(pid) {
      const routeData = this.$router.resolve({
        path: `/paperInfo/${pid}`,
      });
      window.open(routeData.href, "_blank");
    },
    clearSelect() {
      for (var i = 0; i < this.resultData.length; i++) {
        this.resultData[i].isSelected = false;
      }
    },
    checkIsAll(id) {
      for (var i = 0; i < this.resultDataShow.length; i++) {
        if (
          (!this.resultDataShow[i].isSelected && i != id - 1) ||
          (this.resultDataShow[i].isSelected && i == id - 1)
        ) {
          this.isAll = false;
          return;
        }
      }
      this.isAll = true;
      console.log("555");
    },
    nextPage() {
      this.changePage(this.pageNow + 1);
    },
    prePage() {
      this.changePage(this.pageNow - 1);
    },
    changePage(value) {
      this.isAll = false;
      this.pageNow = value;
      if (this.totalPage > 5) {
        if (value > 3 && value < this.totalPage - 3) {
          this.pageListShow = this.pageList.slice(value - 3, value + 2);
        } else if (value >= this.totalPage - 3) {
          this.pageListShow = this.pageList.slice(
            this.totalPage - 6,
            this.totalPage
          );
        } else if (value <= 3) {
          this.pageListShow = this.pageList.slice(0, 6);
        }
      }
      this.resultDataShow = this.resultData.slice(
        (this.pageNow - 1) * this.searchSize,
        this.pageNow * this.searchSize
      );
    },
    selectAll() {
      if (!this.isAll) {
        for (var i = 0; i < this.resultData.length; i++) {
          this.resultDataShow[i].isSelected = true;
        }
      } else {
        for (var j = 0; j < this.resultData.length; j++) {
          this.resultDataShow[j].isSelected = false;
        }
      }
    },
    async bookmark(showid, id) {
      if (!this.isLogin) {
        this.$message({
          showClose: true,
          message: "请先登录！",
          type: "warning",
        });
        return;
      }

      console.log(this.resultData[showid - 1]);
      await this.$axios({
        method: "post",
        url: "/api/bookmark",
        data: this.$qs.stringify({
          paperId: id,
        }),
      }).then((res) => {
        console.log(res);
      });

      if (!this.resultData[showid - 1].isBookmark) {
        this.$message.success("收藏成功，可进入个人中心进行查看");
        console.log(this.resultData[showid - 1]);
        this.resultData[showid - 1].isBookmark = true;
        console.log(this.resultData[showid - 1]);
      } else {
        this.$message.success("取消收藏成功");
        console.log(this.resultData[showid - 1]);
        this.resultData[showid - 1].isBookmark = false;
        console.log(this.resultData[showid - 1]);
      }
      this.initPage();
    },
    changeColor(text) {
      let keyword = this.formData.search.text.split(" ");
      for (let i = 0; i < keyword.length; i++) {
        if (keyword[i] && keyword[i].length > 0) {
          let replaceReg = new RegExp("(" + keyword[i] + ")", "ig");
          let replaceString = '<span style="color: red;">$1</span>';
          text = text.replace(replaceReg, replaceString);
        }
      }
      return text;
    },
    changeScope(text) {
      this.searchScope = text;
      this.isScopeVisible = false;
      // this.initPage();
    },
    changeShow(value) {
      this.searchSize = value;
      this.isShowVisible = false;
      this.initPage();
    },
    changeSort(value) {
      this.sort[this.sortNow].background = "none";
      this.sort[value].background = "#4B5CB3";
      this.sort[this.sortNow].color = "#777777";
      this.sort[value].color = "white";
      this.sortNow = value;
      if (this.sortNow == 0) this.formData.search.sort = "";
      else if (this.sortNow == 1) this.formData.search.sort = "-year";
      else if (this.sortNow == 2) this.formData.search.sort = "-n_citation";
      this.search();
    },
    chooseYear(e, val) {
      console.log(val); // 可获取到当前的下标。
      console.log(e.target);
      console.log(this.year.selected);
      if (e.target.checked) this.year.selected.unshift(e.target.id);
      else {
        this.year.selected.map((val, i) => {
          if (val == e.target.id) this.year.selected.splice(i, 1);
        });
      }
      console.log(this.year.selected);

      let obj = [];
      for (let i = 0; i < this.year.selected.length; i++) {
        obj.push(this.year.selected[i]);
      }
      this.formData.search.year_filter = obj;
      this.search();
    },
    chooseFilter(e, val) {
      console.log(val); // 可获取到当前的下标。
      console.log(e.target);
      console.log(this.filter.selected);
      if (e.target.checked) this.filter.selected.unshift(e.target.id);
      else {
        this.filters[0].selected.map((val, i) => {
          if (val == e.target.id) this.filter.selected.splice(i, 1);
        });
      }
      console.log(this.filter.selected);

      let obj = [];
      for (let i = 0; i < this.filter.selected.length; i++) {
        let temp = {
          item: "idea",
          text: this.filter.selected[i],
        };
        obj.push(temp);
      }
      this.formData.search.filter = obj;
      this.search();
    },
    handleFilterDropdown(value) {
      this.filters[value - 1].visible = !this.filters[value - 1].visible;
    },
    switchEng(str) {
      if (str == "主题") {
        return "idea";
      } else if (str == "标题") {
        return "title";
      } else if (str == "作者") {
        return "author";
      } else if (str == "机构") {
        return "org";
      } else if (str == "来源") {
        return "venue";
      } else if (str == "期刊号") {
        return "issn";
      }
    },
    search() {
      this.loading = true;
      this.$route.params.filter = this.searchScope;
      this.$route.params.content = this.searchInfo;
      // this.formData.search.text = this.searchInfo
      // this.getResult()
      this.initPage();
    },
    calcAuthor(arr) {
      let str = "";
      var i = 0;
      if (arr.length == 0) return "";
      do {
        str += arr[i].name;
        if (i == arr.length - 1) break;
        str += ", ";
        i++;
      } while (i <= arr.length - 1);
      return str;
    },
    async getResult() {
      var list = [];
      if (this.isLogin) {
        await this.$axios({
          method: "get",
          url: "/api/getBookmarkList",
        }).then((res) => {
          console.log(res.data.data);
          list = res.data.data;
          console.log(list);
        });
        console.log(JSON.stringify(this.formData));
        await this.$axios({
          method: "post",
          url: "/api/esQPaper",
          data: JSON.stringify(this.formData),
        }).then((res) => {
          console.log(res.data);
          this.resultData = res.data.post.paper;
          for (let i = 1; i <= this.resultData.length; i++) {
            this.resultData[i - 1].showid = i;
            this.resultData[i - 1].isBookmark = false;
            for (let j = 0; j < list.length; j++) {
              if (list[j].article === this.resultData[i - 1].id) {
                this.resultData[i - 1].isBookmark = true;
                break;
              }
            }
            if (i > this.searchSize) this.loading = false;
          }
          console.log(this.resultData);
        });
      } else {
        await this.$axios({
          method: "post",
          url: "/api/esQPaper",
          data: JSON.stringify(this.formData),
        }).then((res) => {
          console.log(res.data);
          this.resultData = res.data.post.paper;
          for (let i = 1; i <= this.resultData.length; i++) {
            this.resultData[i - 1].showid = i;
            if (i > this.searchSize) this.loading = false;
          }
          console.log(this.resultData);
        });
      }
      // this.checkPage();
    },
    async advanceSearch() {
      var list = [];
      if (this.isLogin) {
        await this.$axios({
          method: "get",
          url: "/api/getBookmarkList",
        }).then((res) => {
          console.log(res.data.data);
          list = res.data.data;
          console.log(list);
        });
        console.log(JSON.stringify(this.$route.params.search));
        let obj={search:this.$route.params.search}
        await this.$axios({
          method: "post",
          url: "/api/esAdvancedQ",
          data: JSON.stringify(obj),
        }).then((res) => {
          console.log(res.data);
          this.resultData = res.data.post;
          for (let i = 1; i <= this.resultData.length; i++) {
            this.resultData[i - 1].showid = i;
            this.resultData[i - 1].isBookmark = false;
            for (let j = 0; j < list.length; j++) {
              if (list[j].article === this.resultData[i - 1].id) {
                this.resultData[i - 1].isBookmark = true;
                break;
              }
            }
            if (i > this.searchSize) this.loading = false;
          }
          console.log(this.resultData);
        });
      } else {
        let obj={search:this.$route.params.search}
        console.log(obj)
        await this.$axios({
          method: "post",
          url: "/api/esAdvancedQ",
          data: JSON.stringify(obj),
        }).then((res) => {
          console.log(res.data);
          this.resultData = res.data.post;
          for (let i = 1; i <= this.resultData.length; i++) {
            this.resultData[i - 1].showid = i;
            if (i > this.searchSize) this.loading = false;
          }
          console.log(this.resultData);
        });
      }
    },
    async initPage() {
      console.log(this.$route.params);
      if (this.$route.params.isFromAdvance) {
        // this.formData.search = this.$route.params.search;
        await this.advanceSearch();
        this.$route.params.isFromAdvance = false;
      } else {
        if (this.$route.params.filter) {
          this.searchScope = this.$route.params.filter;
          this.searchInfo = this.$route.params.content;
        }
        this.formData.search.text = this.searchInfo;
        this.formData.search.by = this.switchEng(this.searchScope);
        await this.getResult();
      }
      this.loading = false;
      if (this.resultData.length == 0) this.noData = true;
      else this.noData = false;

      this.resultCount = this.resultData.length;
      this.totalPage = Math.ceil(this.resultCount / this.searchSize);
      this.pageList = Array(this.totalPage);
      for (var i = 0; i < this.totalPage; i++) {
        this.pageList[i] = i + 1;
      }
      if (this.pageList.length > 5) {
        this.pageListShow = this.pageList.slice(0, 6);
      } else {
        this.pageListShow = this.pageList;
      }
      this.resultDataShow = this.resultData.slice(
        (this.pageNow - 1) * this.searchSize,
        this.pageNow * this.searchSize
      );
    },
  },
  watch: {
    sortNow: function (val, oldval) {
      console.log(val + " " + oldval);
    },
  },
  computed: {
    selectedCount: function () {
      let c = 0;
      for (var i = 0; i < this.resultData.length; i++) {
        if (this.resultData[i].isSelected) c++;
      }
      return c;
    },
    // searchTheme: function () {
    //   var text = "";
    //   for (var i = 0; i <script this.filters[0].selected.length; i++) {
    //     text += this.filters[0].selected[i];
    //     text += "、";
    //   }
    //   text = text.substring(0, text.length - 1);
    //   return text;
    // },
  },
  destroyed() {
    //document.removeEventListener('click');
  },
};
</script>
<style scoped>
/* #region pagination */
.pagination span {
  display: inline-block;
  width: 45px;
  height: 45px;
  margin: 0 5px;
  text-align: center;
  line-height: 45px;
  border-radius: 10px;
  outline: #bababa solid 1px;
  cursor: pointer;
}
.pagination {
  margin: 20px 30px 20px 0;
  text-align: center;
}
/* #endregion pagination */

/* #region table result */
td {
  padding: 20px 15px;
  box-sizing: border-box;
}
th {
  padding: 10px 0;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 3px;
  background-color: #eaedff;
}
table img {
  width: 24px;
  margin: 0 3px;
  cursor: pointer;
}
table {
  margin: 10px 30px 0 0;
  font-size: 14px;
  letter-spacing: 2px;
  border-collapse: collapse;
  border-radius: 5px;
  overflow: hidden;
}
/* #endregion table result */

/* #region search details */
.show-list li:hover {
  background: #eaeaea;
}
.show-list li {
  padding: 0 10px;
  list-style: none;
  cursor: pointer;
}
.show-list ul {
  padding: 0;
  margin: 2px 0;
}
.show-list {
  position: absolute;
  width: 120px;
  margin: 2px 0 0 -25px;
  list-style: none;
  background: white;
  box-shadow: #dedede 0px 0px 5px;
}
.show-count img {
  position: relative;
  right: -40px;
  width: 12px;
}
.show-count {
  margin-left: -25px;
  width: 120px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 5px;
  outline: #dedede 1px solid;
  cursor: pointer;
}
.sort-option {
  display: inline-block;
  width: 80px;
  text-align: center;
  font-weight: 600;
  /* color: #777777; */
  /* border-right: #dedede 1px solid; */
  /* box-sizing: border-box; */
  cursor: pointer;
}
.sort-option-last {
  border: none;
}
.sort-wrap {
  display: inline-block;
  line-height: 35px;
  margin: 0 250px 0 -25px;
  border-radius: 5px;
  outline: #dedede 1px solid;
  overflow: hidden;
}
.search-detail input[type="checkbox"],
table input[type="checkbox"] {
  vertical-align: middle;
  width: 15px;
  height: 15px;
  appearance: none;
  position: relative;
  cursor: pointer;
}
.search-detail input[type="checkbox"]:before,
table input[type="checkbox"]:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 1px solid #777777;
  box-sizing: border-box;
  position: absolute;
}

.search-detail input[type="checkbox"]:checked:before,
table input[type="checkbox"]:checked:before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid #777777;
  background-color: #777777;
  box-sizing: border-box;
  position: absolute;
}
.search-detail input[type="checkbox"]:checked:after,
table input[type="checkbox"]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 6px;
  border-left: 0.1rem solid #fff;
  border-top: 0.1rem solid #fff;
  box-sizing: border-box;
  position: absolute;
  transform: rotate(-135deg) translate(-85%, 15%);
}
.result-count span,
.search-detail span {
  color: #0f5de5;
}
.result-count {
  /* position: absolute; */
  /* right: 100px; */
  float: right;
}
.search-detail-wrap2 .search-detail {
  display: inline-block;
  padding-bottom: 10px;
  /* max-width: 500px;
  min-width: 90px; */
  /* padding: 0 50px 0 0; */
  margin: 0 30px 0 0;
  color: #333333;
  letter-spacing: 3px;
  font-weight: 600;
  vertical-align: top;
  line-height: 35px;
  /* outline: 1px red solid; */
}
.search-detail-wrap1 .search-detail {
  display: inline-block;
  padding-bottom: 10px;
  max-width: 670px;
  /* min-width: 200px; */
  margin-right: 50px;
  color: #333333;
  letter-spacing: 3px;
  font-weight: 600;
  vertical-align: top;
  line-height: 35px;
  /* outline: 1px red solid; */
}
.search-result {
  width: 1160px;
  position: absolute;
  display: inline-block;
  /* outline: 1px black solid; */
}
/* #endregion search details */

/* #region filter */
.filter-box-option input[type="checkbox"] {
  width: 10px;
  height: 10px;
  appearance: none;
  position: relative;
  cursor: pointer;
}
.filter-box-option input[type="checkbox"]:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid #777777;
  box-sizing: border-box;
  position: absolute;
}

.filter-box-option input[type="checkbox"]:checked:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid #777777;
  background-color: #777777;
  box-sizing: border-box;
  position: absolute;
}
.filter-box-option input[type="checkbox"]:checked:after {
  content: "";
  display: block;
  width: 4px;
  height: 5px;
  border-left: 0.1rem solid #fff;
  border-top: 0.1rem solid #fff;
  box-sizing: border-box;
  position: absolute;
  transform: rotate(-135deg) translate(-85%, 15%);
}
.filter-box-option label span {
  position: relative;
  top: -3px;
  left: 3px;
}
.filter-box-option label {
  display: block;
  margin: 5px 0;
  font-size: 14px;
}
.filter-box-option::-webkit-scrollbar {
  width: 5px;
}

.filter-box-option::-webkit-scrollbar-track {
  border-radius: 10px;
}

.filter-box-option::-webkit-scrollbar-thumb {
  /* background: rgb(136, 136, 136); */
  border-radius: 10px;
  cursor: pointer;
}

.filter-box-option::-webkit-scrollbar-thumb:hover {
  background: #ababab;
  border-radius: 10px;
}
.filter-box-option:hover::-webkit-scrollbar-thumb {
  background: #e2e2e2;
  border-radius: 10px;
}
.filter-box-option {
  max-height: 275px;
  overflow-y: scroll;
  /* outline: red 1px solid; */
}
.filter-box-option-wrap {
  padding: 15px 0 15px 20px;
  /* outline: black 1px solid; */
}
.filter-box-title img {
  width: 20px;
  float: right;
  margin: 12px 0 0 10px;
  cursor: pointer;
}
.filter-box-title {
  height: 45px;
  padding: 0 20px;
  line-height: 45px;
  box-sizing: border-box;
  color: #333333;
  font-weight: 600;
  letter-spacing: 4px;
  background-color: #b4c0ff;
}
.filter-box {
  margin: 0 0 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: #d0d0d0 0px 2px 8px;
  /* outline: red solid 1px; */
}
.filter-list-wrap {
  width: 220px;
  margin-right: 45px;
  display: inline-block;
  /* outline: red 1px solid; */
}
/* #endregion filter */

/* #region search box */
.search-icon {
  width: 24px;
  vertical-align: middle;
  cursor: pointer;
}
.search-input-box:hover {
  border: #418fd7 2px solid;
  outline: none;
}
.search-input-box:focus-within {
  border: #82b4e1 2px solid;
  outline: none;
}
.search-input-box input:focus {
  outline: none;
}
.search-input-box input {
  /* display: inline-block; */
  border: none;
  width: 700px;
  padding: 15px 20px;
  border-radius: 15px;
  font-size: 17px;
  letter-spacing: 2px;
}
.search-input-box {
  border: #d8d6d6 2px solid;
  box-shadow: #e9e9e9 0px 0px 10px;
  padding: 0 15px 0 0;
  width: 780px;
  border-radius: 15px;
  font-size: 17px;
  letter-spacing: 2px;
}
.scope-list li:hover {
  background: #eaeaea;
}
.scope-list li {
  padding: 2px 10px;
  list-style: none;
  cursor: pointer;
}
.scope-list ul {
  padding: 0;
  margin: 2px 0;
}
.scope-list {
  position: absolute;
  z-index: 99;
  width: 100px;
  margin: 35px 0 0 -100px;
  list-style: none;
  line-height: 22px;
  background: white;
  box-shadow: #dedede 0px 0px 5px;
}
.search-scope img {
  width: 14px;
  vertical-align: middle;
}
.search-scope {
  display: inline-block;
  width: 90px;
  /* margin: 0 20px; */
  vertical-align: middle;
  font-size: 20px;
  letter-spacing: 2px;
}
.search-scope-wrap {
  width: 120px;
  margin: 0 20px;
  cursor: pointer;
  color: #727272;
  /* outline: black 1px solid; */
}
.search-wrap div {
  display: inline-block;
}
.search-wrap {
  margin: 10px 0 40px;
  text-align: center;
  /* outline: 1px red solid; */
}
/* #endregion search box */
.body {
  padding: 10px 46px;
  /* outline: red 1px solid; */
}
.logo {
}
.logo_img {
  height: 65px;
  width: 65px;
  margin-bottom: -25px;
  margin-right: -10px;
}
.logo_img:hover {
  cursor: pointer;
}
</style>